<template>
	<view>
		<!-- 这里是顶部的选择 -->
		<view class="content">
			<view class="top-switch">
				<view :class="['switch-btn',{'top-active':item.checked}]" v-for="(item,index) in topSwitchList" :key="index" @click="chooseSwitchBtn(index)">
					<image class="top-switch-image" :src="item.checked?item.checkedImgUrl:item.imgUrl" />
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>

		<personalItem :list="jobList" @delItem="delItem" @ediItem="ediItem" :isEdit="true"></personalItem>
	</view>
</template>

<script>
	import personalItem from "../../components/personalItem";
	export default {
		components: {
			personalItem: personalItem
		},
		data() {
			return {
				page: 1,
				limit: 10,
				userInfo: "",
				topSwitchList: [{
						text: "求职",
						imgUrl: "../../static/personal/qz.png",
						checkedImgUrl: "../../static/personal/qz-checked.png",
						checked: true
					},
					{
						text: "租房",
						imgUrl: "../../static/personal/zf.png",
						checkedImgUrl: "../../static/personal/zf-checked.png",
						checked: false
					},
					{
						text: "圈子",
						imgUrl: "../../static/personal/qzi.png",
						checkedImgUrl: "../../static/personal/qzi-checked.png",
						checked: false
					}
				],
				jobList: [],
				current: 0 //顶部选择的是社招还是实习还是圈子
			};
		},
		methods: {
			// 获取列表信息
			getList() {
				let data = {
					limit: this.limit,
					page: this.page,
					openid: this.userInfo.openid,
					type: this.current + 1,
					pageType: 1
				}
				this.sgAjax.getData("/user/myList", data).then(res => {
					uni.hideLoading()
					this.page += 1
					this.jobList = this.jobList.concat(res.data.list)
				})
			},

			// 删除列表中的某一条	index列表中的索引
			delItem(index) {
				uni.showLoading({
					title: "加载中"
				})
				let data = {
					openid: this.userInfo.openid,
					type: this.current + 1,
					projectid: this.jobList[index].id,
					pageType: 1
				}
				this.sgAjax.getData("/user/delListItem", data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "删除成功！",
						mask: true
					})
					this.jobList.splice(index, 1)
				})
			},

			// 修改列表中的某一条数据 index列表中的索引
			ediItem(index) {
				console.log("选中的是社招还是实习的index是", this.current)
				console.log("计划修改的索引为", index)
				if (this.current == 0) {
					uni.navigateTo({
						url: "../job/releasejob?jid=" + this.jobList[index].id
					})
				}
			},

			// 选择顶部的社招还是实习还是圈子
			chooseSwitchBtn(index) {
				this.current = index
				this.topSwitchList.map((item, ind) => {
					item.checked = ind == index ? true : false;
				});
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			uni.showLoading({
				title: "加载中"
			})
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		watch: {
			current(val) {
				uni.showLoading({
					title: "加载中"
				})
				this.page = 1
				this.jobList = []
				this.getList()
			}
		}
	};
</script>

<style scoped>
	.content {
		padding: 0 0 90rpx;
		box-sizing: border-box;
	}

	.flex-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-box2 {
		margin: 16rpx 0 21rpx;
	}

	.top-switch {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 10rpx;
		position: fixed;
		top: 0;
		z-index: 99;
		background-color: #FFFFFF;
		width: 100%;
	}

	.top-switch-image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
		vertical-align: middle;
	}

	.edit-image {
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
	}

	.switch-btn {
		border-radius: 40rpx;
		border-radius: 40rpx;
		width: 230rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.top-active {
		background: #1b82fe;
		box-shadow: 0 8rpx 10rpx -6rpx rgba(0, 38, 208, 0.3);
		color: #ffffff;
	}
</style>
